// 指纹管理模块

import { observer } from "mobx-react";
import "./index.less"
import { Card, Form, Row, Col, Button, Input, Table, Pagination, Space, Spin, Modal, Popconfirm, Descriptions, Alert } from 'antd';
import { PauseCircleOutlined, SearchOutlined } from '@ant-design/icons';
import store from "./model"
import Menu from "../publicComponent/menu/index.jsx"
import { history } from "umi";
import { useEffect, useState } from "react";
import { values } from "lodash";
import indexStore from "../model"
import FingerApi from "../finger_device/model"



function Index() {

    const [form] = Form.useForm();
    // 患者详细信息
    let [d, setD] = useState({})

    // 创建指纹扫描，只创建一次
    useEffect(() => {
        let flag = sessionStorage.getItem("isCreateServer")
        if (!flag) {
            FingerApi.createServer()
            sessionStorage.setItem("isCreateServer", "指纹扫描已经启动")
        }
    }, [])

    // 记录最后一次跳转路由path
    // 设置窗口大小和位置
    useEffect(() => {
        indexStore.StoragePath(history.location.pathname)
        FingerApi.setWindowSize(1000, 760)
        FingerApi.centerWindow()
    }, [])

    // 获取患者list
    useEffect(() => {
        store.getPatientList()
    }, [])

    // 搜素事件
    function search() {
        store.form = form.getFieldsValue()
        store.flag = "搜索"
        store.getPatientList()

    }

    // 分页时触发
    function changePages(pageNum) {
        store.pageNum = pageNum
        store.flag = "分页"
        store.getPatientList()
    }

    // 打开指纹信息弹框
    function openModal(e) {
        store.patientId = e.id
        store.getFingerPrintDetail()

    }

    // 患者表头
    let patientColumns = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
            align: "center",
        },
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
            align: "center",
        },
        {
            title: '科室',
            dataIndex: 'department',
            key: 'department',
            align: "center",
        },
        {
            title: '性别',
            key: 'sex',
            align: "center",
            render: function (e, row) {
                return (
                    <span>{row.sex == "1" ? "女" : "男"}</span>
                )
            }
        },
        {
            title: '门诊号',
            key: 'outpatientId',
            align: "center",
            render: function (e, row) {
                return (
                    <span>{row.outpatientId ? row.outpatientId : "未绑定"}</span>
                )
            }
        },
        {
            title: '住院号',
            key: 'hospitalizationId',
            align: "center",
            render: function (e, row) {
                return (
                    <span>{row.hospitalizationId ? row.hospitalizationId : "未绑定"}</span>
                )
            }
        },
        {
            title: '指纹数量',
            key: 'fingerprintNum',
            align: "center",
            render: (text, record) => {
                return (
                    <span>
                        <span
                            style={{ color: record.fingerprintNum ? "#18aeff" : "" }}
                        >
                            {record.fingerprintNum ? record.fingerprintNum : "未绑定"}
                        </span>
                    </span>
                )
            },
        },
        {
            title: '操作',
            align: "center",
            width: 150,
            render: function (e, row) {
                return (
                    <Space size="middle">
                        <a onClick={() => { openModal(row) }}>指纹绑定</a>
                        <a onClick={() => { setD(row); store.isModalOpen2 = true }}>查看</a>
                    </Space>
                )
            }
        },
    ]

    // Modal表格表头(打开指纹框)
    let fingerPrintColumns = [
        {
            title: 'id',
            dataIndex: 'id',
            key: 'id',
            align: "center",
            width: "10%",
        },
        {
            title: '录入时间',
            dataIndex: 'createTime',
            key: 'createTime',
            align: "center",
            sorter: {
                compare: (a, b) => {
                    let aTime = new Date(a.createTime||'2008-1-10').getTime();
                    let bTime = new Date(b.createTime||'2008-1-10').getTime();
                    return aTime - bTime;
                },
                multiple: 1,
            },
        },
        {
            title: '指纹信息',
            // dataIndex: 'fingerprintStr',
            key: 'fingerprintStr',
            align: "center",
            render: function (e, row) {
                return (
                    <span>{row.fingerprintStr.slice(0, 15) + "···"}</span>
                )
            }
        },
        {
            title: '操作',
            align: "center",
            width: "10%",
            render: function (e, row) {
                return (
                    <Space size="middle">
                        <Popconfirm
                            title="确认删除？"
                            onConfirm={() => { store.del(row) }}
                            okText="确认"
                            cancelText="取消"
                        >
                            <a style={{ color: "red" }}>删除</a>
                        </Popconfirm>

                    </Space>
                )
            }
        },
    ]

    // 关闭扫描
    function closeScan() {
        store.isScan = false
        if(store.timer){
            clearInterval(store.timer)
        }
       
    }


    return (
        <>
            <Spin tip="加载中" spinning={store.loading} size="large">
                <div className="fingerprint">
                    <div className="fingerprint-title">
                        <img onClick={() => { history.push({ pathname: "/", query: { name: "child" } }), indexStore.StoragePath("/") }} src={require("../../assets/images/向左箭头.png")} alt="" />
                        指纹录入
                    </div>
                    <div className="fingerprint-body">
                        <Form form={form}>
                            <Row justify="center" style={{marginBottom: "8px"}}>
                                <Col> <Alert message="请在评估录入信息之前让患者及家属阅读知情告知书并签字" type="warning" /></Col>
                            </Row>
                            <Row gutter={24}>
                                <Col span={5}>
                                    <Form.Item label="姓名" name="name">
                                        <Input placeholder="请输入姓名" />
                                    </Form.Item>
                                </Col>
                                <Col span={5}>
                                    <Form.Item label="科室" name="department">
                                        <Input placeholder="请输入科室" />
                                    </Form.Item>
                                </Col>
                                <Col span={5}>
                                    <Form.Item label="住院号" name="hospitalizationId">
                                        <Input placeholder="请输入住院号" />
                                    </Form.Item>
                                </Col>
                                <Col span={5}>
                                    <Form.Item label="门诊号" name="outpatientId">
                                        <Input placeholder="请输入门诊号" />
                                    </Form.Item>
                                </Col>
                                <Col span={4}>
                                    <Button type="primary" onClick={search} icon={<SearchOutlined />}>搜索</Button>
                                </Col>
                            </Row>
                        </Form>
                        <div className="fingerprint-body-table">
                            <Table size="middle" bordered rowKey="id" dataSource={store.patientList} columns={patientColumns} pagination={{defaultPageSize: 9}} />
                            {/* <Table size="middle" bordered rowKey="id" dataSource={store.patientList} columns={patientColumns} pagination={false} /> */}
                        </div>
                        <div className="fingerprint-body-pages">
                            {/* <Pagination showQuickJumper total={store.total} onChange={changePages} /> */}
                        </div>
                    </div>
                </div>
            </Spin>
            {/* 打开绑定指纹弹框 */}
            <Modal
                width="80%"
                title="指纹信息"
                cancelText="关闭"
                okText="指纹录入"
                visible={store.isModalOpen} onCancel={() => { store.isModalOpen = false; store.getPatientList() }}
                onOk={store.scan}>
                <Table size="middle" bordered rowKey="id" dataSource={store.fingerPrintList} columns={fingerPrintColumns} pagination={false} />
            </Modal>
            <Modal
                width="80%"
                title="详细信息"
                cancelText="关闭"
                visible={store.isModalOpen2}
                onCancel={() => { store.isModalOpen2 = false }}
                onOk={() => { store.isModalOpen2 = false }}
            >
                <Descriptions
                    bordered
                    column={24}
                    style={{ width: "100%" }}
                    size={"small"}
                    labelStyle={{ width: 100 }}
                    contentStyle={{ width: 200 }}
                >
                    <Descriptions.Item label="姓名：" span={8}>{d.name}</Descriptions.Item>
                    <Descriptions.Item label="性别：" span={8}>{d.sex == "0" ? "男" : d.sex == "1" ? "女" : ""}</Descriptions.Item>
                    <Descriptions.Item label="患病年龄(岁):" span={8}>{d.age}</Descriptions.Item>
                    <Descriptions.Item label="出生日期:" span={8}>{d.birthday}</Descriptions.Item>
                    <Descriptions.Item label="身份证号:" span={8}>{d.idCard}</Descriptions.Item>
                    <Descriptions.Item label="民族:" span={8}>{d.nation == "0" ? "汉族" : d.nation == "1" ? "少数民族" : ""}</Descriptions.Item>
                    <Descriptions.Item label="社保卡号:" span={8}>{d.socialSecurityCard}</Descriptions.Item>
                    <Descriptions.Item label="就诊卡号:" span={8}>{d.medicalCard}</Descriptions.Item>
                    <Descriptions.Item label="床位号:" span={8}>{d.bedNum}</Descriptions.Item>
                    <Descriptions.Item label="病区:" span={8}>{d.medicalZone}</Descriptions.Item>
                    <Descriptions.Item label="房间号:" span={8}>{d.roomNum}</Descriptions.Item>
                    <Descriptions.Item label="门诊号:" span={8}>{d.outpatientId}</Descriptions.Item>
                    <Descriptions.Item label="住院号:" span={8}>{d.hospitalizationId}</Descriptions.Item>
                    <Descriptions.Item label="既往病史:" span={8}>{d.pastMedicalHistory}</Descriptions.Item>
                    <Descriptions.Item label="诊断信息:" span={8}>{d.diagnosis}</Descriptions.Item>
                    <Descriptions.Item label="身高(cm):" span={8}>{d.height}</Descriptions.Item>
                    <Descriptions.Item label="阈值(%):" span={8}>{d.threshold}</Descriptions.Item>
                    <Descriptions.Item label="体重(kg):" span={8}>{d.weight}</Descriptions.Item>
                    <Descriptions.Item label="科室:" span={8}>{d.department}</Descriptions.Item>
                    <Descriptions.Item label="简明病历:" span={8}>{d.simpleCase}</Descriptions.Item>
                    <Descriptions.Item label="职业:" span={8}>{d.occupation}</Descriptions.Item>
                    <Descriptions.Item label="体征:" span={8}>{d.signSymptoms}</Descriptions.Item>
                    <Descriptions.Item label="治疗意见:" span={8}>{d.treatmentOption}</Descriptions.Item>
                    <Descriptions.Item label="TMS次数:" span={8}>{d.tmsNumber}</Descriptions.Item>
                    <Descriptions.Item label="MEP次数:" span={8}>{d.mepNumber}</Descriptions.Item>
                    <Descriptions.Item label="最后治疗:" span={8}>{d.lastCureTime}</Descriptions.Item>
                </Descriptions>
            </Modal>
            {/* 扫描动画 */}
            {
                store.isScan && (
                    <div className="scan" >
                        <div className="scan-box">
                            <div className="scan-box-one frame"></div>
                            <div className="scan-box-two frame"></div>
                            <div className="scan-box-three frame"></div>
                            <div className="scan-box-four frame"></div>
                            <div className="scan-picture">
                                <img src={require("../../assets/images/指纹.png")} alt="" />
                            </div>
                            <div className="pointer-box">
                                <div className="pointer"></div>
                            </div>
                        </div>
                        <div className="scan-tip">正在识别 · · · </div>
                        {/* <div className="scan-close" onClick={() => { closeScan() }}></div> */}
                        <div className="scan-close" onClick={() => { closeScan() }}><Button type="primary" shape="circle" icon={<PauseCircleOutlined />} /></div>
                    </div>
                )
            }
        </>
    )
}

export default observer(Index)